<template>
	<view @touchmove.stop.prevent="moveHandle">
		<uni-popup ref="popup" type="center" :safe-area='false'>
			<view class="date-box">
				<view class="title">请勾选周（多选）</view>
				<uni-data-checkbox multiple v-model="weekVal" selectedColor="#ff9600" selectedTextColor="#ff9600" :localdata="rangeWeek" @change="changeWeek"></uni-data-checkbox>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
            weekArr:{
				type:Array,
				default:[]
			},
			isRead:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				weekVal: [],
				rangeWeek: [{
					"value": 'mon',
					"text": "周一"
				}, {
					"value": 'tue',
					"text": "周二"
				}, {
					"value": 'wed',
					"text": "周三"
				}, {
					"value": 'thu',
					"text": "周四"
				}, {
					"value": 'fri',
					"text": "周五"
				}, {
					"value": 'sat',
					"text": "周六"
				}, {
					"value": 'sun',
					"text": "周日"
				}],
				weekObj: {
					sun: '周日',
					mon: '周一',
					tue: '周二',
					wed: '周三',
					thu: '周四',
					fri: '周五',
					sat: '周六',
				}
			}
		},
		methods: {
			// 禁止弹窗滚动
			moveHandle() {
				return false
			},
			// 选择周日期
			changeWeek(e) {
				this.$emit('changeWeek',e.detail.value)
			},
			// 打开弹窗
			openPop() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			// 关闭弹窗
			closePop() {
				this.$refs.popup.close()
			},
			initData(){
				this.weekVal = this.weekArr
			}
		},
		mounted() {
			this.initData()
		}
	}
</script>

<style lang="scss" scoped>
	.date-box {
		background: linear-gradient(to bottom, #fef5e5 0%, #FFF 25%, #FFF 100%);
		border-radius: 30rpx;
		padding: 40rpx;
		width: 560rpx;
		max-height: 800rpx;
		overflow-y: auto;
	}
	
	.title{
		text-align: center;
		padding-bottom: 30rpx;
		font-weight: bold;
	}
</style>